<template>
    <a-modal v-model:visible="visable" :title="title" :width="500" :mask-closable="false" @ok="doSubmit" @cancel="close">
        <a-form ref="appForm" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }" layout="vertical">
            <a-row :gutter="8">
                <a-col :span="12">
                    <a-form-item label="角色名称" label-position="top" field="name">
                        <a-input v-model="formData.name" placeholder="请输入角色名称" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="是否可用" label-position="top" field="status">
                        <a-radio-group type="button" button-style="solid" v-model="formData.status" :false-value="0"
                            :true-value="1">
                            <a-radio :value="1">启用</a-radio>
                            <a-radio :value="0">禁用</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="24">
                    <a-form-item label="角色描述" label-position="top" field="description">
                        <a-textarea placeholder="请输入角色描述" allow-clear v-model="formData.description" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <!-- <a-spin size="large" fix v-if="loading" /> -->
    </a-modal>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';
export default {
    setup(props, { emit }) {
        const visable = ref(false);
        const loading = ref(false);
        const title = ref();
        const appForm = ref();
        const formRule = {
            name: [{ required: true, message: '请输入角色名称' }],
        };
        const formData = ref({
            name: ref(''),
            description: ref(''),
            status: ref(1)
        });
        const show = (data: any) => {
            visable.value = true;
            if (!data) {
                title.value = "添加角色"
            } else {
                formData.value = JSON.parse(JSON.stringify(data));
                title.value = "修改角色";
            }
        };
        const doSubmit = () => {
            return new Promise(resolve => {
                appForm.value.validate().then((err: any) => {
                    if (err) {
                        resolve(false); return;
                    }
                    // utils.loading();
                    request.post('/platform/role/save', formData.value).then((ret: any) => {
                        if (ret.code == 200) {
                            resolve(true);
                            close();
                            emit('success');
                            utils.success('操作成功！');
                        }
                        resolve(false);
                    }).catch(() => {
                        resolve(false);
                        loading.value = false;
                    })
                })
            })
        };
        const close = () => {
            appForm.value.resetFields();
            formData.value.description = '';
            formData.value.status = 1;
            visable.value = false;
        };
        return { visable, appForm, title, formData, formRule, show, close, doSubmit, };
    }
}
</script>

<style scoped>
.demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
</style>
